<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Vue库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Import jQuery -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../icons/element-icons.woff">
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/normal.css">
    <script type="module" src="../js/addProduct.js"></script>
</head>

<body>
    <div id="app">
        <div class="app-wrapper" :class="{'sidebar-hide':isActive}">
            <div class="sidebar-container" :span="4">
                <el-scrollbar max-height="1080px">
                    <el-menu mode="vertical" :show-timeout="100" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                        background-color="#304156" text-color="#bfcbd9" active-text-color="#409EFF">
                        <el-menu-item index="0">
                            <i class="el-icon-s-home"></i>
                            <span slot="title">首页</span>
                          </el-menu-item>
                        <el-submenu index="1">
                            <template slot="title">
                              <i class="el-icon-s-goods"></i>
                              <span>商品</span>
                            </template>
                              <el-menu-item index="1-1">商品列表</el-menu-item>
                              <el-menu-item index="1-2">添加商品</el-menu-item>
                              <el-submenu index="1-3"><span slot="title">商品分类</span>
<!--                                <el-menu-item index="1-3-1">猫</el-menu-item>-->
<!--                                <el-menu-item index="1-3-2">狗</el-menu-item>-->
<!--                                <el-menu-item index="1-3-3">鱼</el-menu-item>-->
<!--                                <el-menu-item index="1-3-4">鸟</el-menu-item>-->
<!--                                <el-menu-item index="1-3-5">爬行类</el-menu-item>-->
                                  <a href="viewProductAttr?categoryId=CATS"> <el-menu-item index="1-3-1">猫</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=DOGS"><el-menu-item index="1-3-2">狗</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=FISH"><el-menu-item index="1-3-3">鱼</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=BIRDS"><el-menu-item index="1-3-4">鸟</el-menu-item></a>
                                  <a href="viewProductAttr?categoryId=REPTILES"><el-menu-item index="1-3-5">爬行类</el-menu-item></a>
                              </el-submenu>
                          </el-submenu>
                          <el-menu-item index="2">
                            <i class="el-icon-s-order"></i>
                            <span slot="title">订单</span>
                          </el-menu-item>
                          <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">待开发</span>
                          </el-menu-item>
                          <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">管理</span>
                          </el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="main-container" :span="20">
                  <el-menu class="navbar" mode="horizontal">
                    <div class="hamburger-container" :toggleClick="toggleSideBar" :isActive="opened">
                        <svg t="1492500959545" @click="toggleClick" class="hamburger" :class="{'is-active':isActive}" style="" viewBox="0 0 1024 1024"
                          version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64">
                          <path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z"
                            p-id="1692"></path>
                          <path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z"
                            p-id="1693"></path>
                          <path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z"
                            p-id="1694"></path>
                        </svg>
                      </div>
                    <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                      <div class="avatar-wrapper">
                        <img class="user-avatar" >
                        <i class="el-icon-caret-bottom"></i>
                      </div>
                      <el-dropdown-menu class="user-dropdown" slot="dropdown">
                        <a class="inlineBlock" to="/">
                          <el-dropdown-item command="home">
                            首页
                          </el-dropdown-item>
                        </a>
                        <el-dropdown-item divided>
                          <span @click="logout" style="display:block;">退出</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-menu>
                  <el-card class="form-container" shadow="never">
                  <div style="margin-top: 30px">
                    <el-form :model="value" :rules="rules" ref="" label-width="120px" class="form-inner-container" size="small" action="/addProduct">
                      <el-form-item label="商品分类：" prop="productCategoryId">
                        <el-cascader
                          v-model="selectProductCateValue"
                          :options="productCateOptions">
                        </el-cascader>
                      </el-form-item>
                      <el-form-item label="商品名称：" prop="name">
                        <el-input v-model="value.name"></el-input>
                      </el-form-item>
                      <el-form-item label="商品种类：">
                        <el-input v-model="value.productCategory"></el-input>
                      </el-form-item>
                      <el-form-item label="商品介绍：">
                        <el-input
                          :autoSize="true"
                          v-model="value.description"
                          type="textarea"
                          placeholder="请输入内容"></el-input>
                      </el-form-item>
                      <el-form-item label="商品售价：">
                        <el-input v-model="value.price"></el-input>
                      </el-form-item>
                      <el-form-item label="商品库存：">
                        <el-input v-model="value.stock"></el-input>
                      </el-form-item>
                      <el-form-item style="text-align: center">
                        <el-button type="primary" size="medium" @click="addProduct">确认创建</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                  </el-card>
            </div>
        </div>
    </div>
    <style>
        .form-container {
          width: 800px;
        }
      </style>
</body>
</html>